<template>
  <div class="MarketChartContent">
    <img class="titImg" src="../../assets/img/markettit.png" alt="">
    <div id="SalesRankingId" class="MarketChartcont" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { getStoreRank } from '@/api/user'
echarts.use([GridComponent, BarChart, CanvasRenderer])
export default {
  name: 'MarketChart',
  data() {
    return {
      arr: [],
      max: null,
      colorList: [
        ['#0EBFF9', '#3AF9A0'],
        ['#0EBFF9', '#3AF9A0'],
        ['#0EBFF9', '#3AF9A0'],
        ['#0EBFF9', '#3AF9A0'],
        ['#0EBFF9', '#3AF9A0'],
        ['#0EBFF9', '#3AF9A0']
      ],
      dataList: [],
      showDataList:[],
      colorItem: [],
      sumNumber: [],
      storeNameList: [],
    }
  },
  mounted() {
    this.getStoreRank();
  },
  beforeDestroy() {

  },
  methods: {
    initEcahstr() {
      var colorList = [
        ['#3AF9A0', '#0EBFF9'],
        ['#3AF9A0', '#0EBFF9'],
        ['#3AF9A0', '#0EBFF9'],
        ['#3AF9A0', '#0EBFF9'],
        ['#3AF9A0', '#0EBFF9'],
        ['#3AF9A0', '#0EBFF9']
      ]
      var dataList = this.dataList;
      var showDataList = this.showDataList;
      // var dataList2 = ['8560万元', '8006万元', '6860万元', '6060万元', '5060万元']
      this.getSymbolData(dataList)
      function colorFn(params) {
        // params 传递过来的柱子对象
        // dataIndex 是当前柱子的索引
        var colorItem = colorList[params.dataIndex]
        return new echarts.graphic.LinearGradient(
          1,
          0,
          0,
          0,
          [
            {
              offset: 0,
              color: colorItem[0]
            },
            {
              offset: 1,
              color: colorItem[1]
            }
          ],
          false
        )
      }
      const sumNumber = this.sumNumber;
      // console.log(sumNumber)
      const NumberList = sumNumber.map((v, index) => {
        return {
          value: v.value,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: 'rgba(255,255,255,0.1)', // 填充色
              borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(255,255,255,0)'
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0)'
                }
              ])
            }

            // borderWidth: 2
          }
        }
      })
      const option = {
        backgroundColor: 'rgba(128, 128, 128, 0)',
        grid: {
          left: '4%',
          right: '4%',
          bottom: '0%',
          top: '10%'
          // containLabel: true
        },
        xAxis: {
          max:this.max,
          show: false // 不显示x轴相关信息
        },
        yAxis: [
          {
            type: 'category',
            data: this.storeNameList,
            // },
            axisLabel: {
              show: true,
              inside: true,
              textStyle: {
                color: 'rgba(255, 255, 255, 0.9)',
                verticalAlign: 'bottom',
                fontSize: 12,
                align: 'left',
                padding: [0, 0, 10, 0]
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            inverse: true
          },
          {
            type: 'category',
            data: showDataList, // 显示的数据
            axisTick: { show: false }, // 不显示刻度线
            axisLabel: {
              show: true,
              inside: true,
              formatter: '{value}元',
              textStyle: {
                color: 'rgba(255,255,255,0.9)',
                fontSize: 12,
                verticalAlign: 'bottom',
                align: 'right',
                padding: [0, 0, 10, 0]
              }
            },
            axisLine: {
              show: false
            },
            inverse: true
          }
        ],
        series: [
          {

            // name: dataList,
            name: "近七日门店销售排名",
            yAxisIndex: 0,
            // colorBy: 'series',
            tooltip: {
              show: true // 显示提示框
            },
            type: 'bar',
            data: dataList,
            // 修改第一条柱子的圆角
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: colorFn
              }
              // color 可以修改柱子的颜色
              // color:"orange"
            },
            // 柱子之间的间距
            barCategoryGap: 10,
            // 柱子之间的宽度
            barWidth: 5
            // markPoint: {
            //   data: [{
            //     // name: '某个坐标',
            //     coord: [0, 1],
            //     symbolOffset: ['100%', 0]
            //   }],
            //   symbol: 'circle',
            //   symbolSize: 10
            // }
          },
          {
            name: 'XXX',
            type: 'pictorialBar',
            symbolSize: [10, 10],
            symbolOffset: [5, 0],
            symbol: 'image://' + require('../../assets/img/ciclePoint.png'),
            z: 3,
            data: this.arr
          },
          {
            // name: '框',
            tooltip: {
              show: false // 显示提示框
            },
            yAxisIndex: 1,
            type: 'bar',
            barGap: '0%',
            // 柱子之间的间距
            barCategoryGap: 10,
            // 柱子之间的宽度
            barWidth: 10,
            data: NumberList
          }
        ]
      }

      var chartDom = document.getElementById('SalesRankingId')
      var myChart = echarts.init(chartDom, 'dark')
      option && myChart.setOption(option)
    },
    // 这个方法很重要，是处理小圆圈的数据和位置的
    getSymbolData(Ydata) {
      this.arr = []
      for (var i = 0; i < Ydata.length; i++) {
        this.arr.push({
          value: Ydata[i],
          symbolPosition: 'end'
        })
      }
    },
    async getStoreRank() {
      const res = await getStoreRank()
      if (res.code === 200) {
        console.log(res.data, "门店销售排名数据");
        let allL = (res.data[0]?.salesSum / 0.9).toFixed(0);
        this.max = allL;
        
        res.data.forEach((item, i) => {
          this.storeNameList.push(`NO.${i + 1}   ${item.storeName}`)
          this.dataList.push((item.salesSum).toFixed(0))
          this.showDataList.push((item.salesSum).toFixed(0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","))
          this.sumNumber.push({ value: allL });
        })
        this.initEcahstr()
        // this.$nextTick(()=>{
        // })
      }
    },
  }
}
</script>

<style scoped lang="scss">
.MarketChartContent {

  // padding: .1563rem;
  .titImg {
    width: 2.4948rem;
    height: .3125rem;
  }

  .MarketChartcont {
    height: 1.1719rem;
    width: 2.5521rem;
  }
}
</style>
